<template>
    <div>

      <div style="width: 83%;margin: auto;margin-top: 0.9rem">
        <p class="p1">{{title}}</p>

        <div style="margin-top: 0.6rem;overflow: hidden">
			<div class="newtel">请输入手机{{tel}}收到的验证码</div>
          <!-- div class="shouji" style="margin-top: 0.7rem">
            <img src="static/img/person/shouji.png" alt="">
            <input type="number" pattern="\d*" placeholder="请输入手机号" class="input1"  v-model="phone">
          </div> -->
			<!-- <div class="phonetis" v-if='phonewrong'>请输入正确手机号</div>
			<div class="phonetis" v-if='phonestatus'>请输入手机号</div> -->
          <div class="yanzheng">
            <img src="../../../src/assets/img/person/yanzheng.png" alt="">
            <input type="number" pattern="\d*" placeholder="请输入验证码" v-model="code">
            <mt-button type="primary" plain v-if='entercode' plain class="btnnn sendactive">重新发送<span>({{timecode}}s)</span></mt-button>
            <mt-button type="primary" plain v-else plain class="btnnn" @click='enterlogincode'>获取验证码</mt-button>
          </div>
			<div class="phonetis" v-if='codestatus'>请输入验证码</div>
          <div class="shouji" style="margin-top: 0.7rem">
            <img src="../../../src/assets/img/person/mima.png" alt="">
            <input  type="password" pattern="\d*" placeholder="请输入密码" class="input1"  v-model="newpassword">
          </div>
			<div class="phonetis" v-if='passwordstatus1'>密码过短</div>
			<div class="phonetis" v-if='passwordstatus2'>密码过长</div>
          <div class="shouji" style="margin-top: 0.7rem">
            <img src="../../../src/assets/img/person/mima.png" alt="">
            <input type="password" pattern="\d*" placeholder="请再次输入新密码" class="input1"  v-model="newpasswordagain" >
          </div>
			<div class="phonetis" v-if='passwordsagain'>俩次密码不一致</div>
					
          <mt-button type="primary" v-if='code==""||phone==""||newpassword==""||newpasswordagain==""' class="btn111" @click="enter()">完成</mt-button>
          <mt-button type="primary" v-else class="btn111 butactive" @click="enter()">完成</mt-button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Wjmima",
      data(){
          return{
			entercode:false,
			timecode:60,
			phone:'',
			tel:'',
			type:'',
			code:'',   //验证码
			newpassword:'',  //新密码
			newpasswordagain:'',  //第二次输入的新密码
			phonestatus:false,
			phonewrong:false,
			codestatus:false,
			passwordstatus1:false,   //密码过短
			passwordstatus2:false,//密码过长
			passwordsagain:false,
			title:'',
          }
      },
	   methods:{
			// 点击获取验证码
			enterlogincode(){
				var that = this;
				this.entercode = true;
				var times = 60;
				var that = this;
				var timer = setInterval(function () {
				  times--;
				  that.timecode = times
				  if (times <= 0) {
					clearInterval(timer);
					that.entercode = false;
				  }
				}, 1000)
				var type = that.type;
				// console.log(type)
				if(type!=3||type!='3'){
					that.axios.get(that.$store.state.url + "User/sendOldSmsCode").then(res=>{
					  if (res.data.errcode == 0||res.data.errcode == '0'){
						// console.log(res.data)
						that.$toast({
						  message:res.data.msg,
						  position:'bottom'
						});
					  }else {
						that.$toast({
						  message:res.data.msg,
						  position:'bottom'
						});
					  }
					
					})
				}else{
					that.axios.get(that.$store.state.url + "sms/getSmsCode",{
						params:{
							tel:that.phone,
						}
					}).then(res=>{
					  if (res.data.errcode == 0||res.data.errcode == '0'){
						// console.log(res.data)
						that.$toast({
						  message:res.data.msg,
						  position:'bottom'
						});
					  }else {
						that.$toast({
						  message:res.data.msg,
						  position:'bottom'
						});
					  }
					
					})
				}
			},
			// 点击完成
			enter(){
				// console.log(88)
			    var that = this;
			    if(that.code==''){
					that.$toast({
						message:'请输入验证码',
						position:'center'
					});
			    }else if(that.newpassword==''){
					that.$toast({
						message:'请输入密码',
						position:'center'
					});
				}else if(that.passwordstatus1){
					that.$toast({
						message:'密码过短',
						position:'center'
					});
				}else if(that.passwordstatus2){
					that.$toast({
						message:'密码过长',
						position:'center'
					});
				}else if(this.newpasswordagain!=this.newpassword){
					that.$toast({
						message:'俩次密码不一致',
						position:'center'
					});
				}else{
					// console.log(888);
					var type = that.type;
					if(type!=3||type!='3'){
						var url = that.$store.state.url + "User/setPassword"
						var data ={
							password:that.newpassword,
							code:that.code,
						}
					}else{
						var url = that.$store.state.url + "User/findPassword"
						var data ={
							password:that.newpassword,
							code:that.code,
							tel:that.phone
						}
					}
					that.axios({
						method:"POST",
						url:url,
						data:data,
					}).then(res=>{
						// console.log(res);
						var data = res.data;
						if(data.errcode==0||data.errcode=='0'){
							that.$toast({
							  message:'成功',
								position:'center'
							});
							setTimeout(function(){
								that.$router.go(-1);
							},1500)
						}else{
							this.$toast({
							message:res.data.msg,
								position:'center'
						});
						}
					})
				}
			}
		},
		watch:{
			// 验证码
			code(){
				if(this.code==''){
					this.codestatus=true
				}
			},
			newpassword(){
				if(this.code==''){
					this.codestatus=true
				}
				if(this.phone==''){
					this.phonestatus=true;
					this.phonewrong=false;
				}else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
					this.phonestatus=false;
					this.phonewrong=true;
				}else{
					this.phonestatus=false;
					this.phonewrong=false;
				}
				var newpassword=this.newpassword;
				var len = newpassword.length;
				// console.log(password.length);
				if(len<6||len<'6'){
					this.passwordstatus1=true;
					this.passwordstatus2=false;
				}else if(len>15||len>'15'){
					this.passwordstatus2=true;
					this.passwordstatus1=false;
				}else{
					this.passwordstatus2=false;
					this.passwordstatus1=false;
				}
			},
			newpasswordagain(){
				// console.log(this.newpasswordagain==this.newpassword)
				if(this.newpasswordagain!=this.newpassword){
					this.passwordsagain=true
				}else{
					this.passwordsagain=false
				}
			},
		},
		mounted(){
			this.sdk.getJSSDK('','',this.$store.state.url);	
			var that = this;
			
			if(this.$route.query.type){
				var type = this.$route.query.type;
				this.type = type;
				if(type==1||type=='1'){  //修改登录密码
					$('title').html('修改密码');
					this.title = '修改密码'
				}else{
					$('title').html('设置密码');
					this.title = '设置密码'
				}
// 				if(type==3||type=='3'){
// 					
// 				}
				var phone = this.$route.query.tel;
				// var phone = localStorage.getItem('phone');
				// localStorage.getItem
				// alert(phone);
				that.tel = phone.substr(0,3)+"****"+phone.substr(7);
				that.phone = phone;
			}
			
		},
			
			
    }
</script>

<style scoped>
	.newtel{
		color: #999999;
		font-size: .24rem;
	}
	.phonetis{
		color: #FE3434;
		font-size: .26rem;
		text-align: right;
		margin-top: .13rem;
	}
  .p1{
    font-size:0.5rem;
    font-weight:800;
    color:rgba(51,51,51,1);
  }
  .shouji{
    position: relative;
    height: 0.7rem;
  }
  .shouji img{
    width: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0.18rem;
  }
  .input1{
    width: 100%;
    height: 0.7rem;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
    text-indent: 0.6rem;
  }
  input{
    border: none;
    outline: none;
    font-size: 0.3rem;
  }
  input::placeholder{
    font-size:0.3rem;
    color:rgba(153,153,153,1);
  }
  input:focus::placeholder{
    color: transparent;
  }
  .yanzheng{
    width: 100%;
    height: 0.9rem;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
    margin-top: 0.4rem;
    position: relative;
  }
  .yanzheng img{
    width: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0.1rem;
  }
  .yanzheng input{
    width: 50%;
    float: left;
    margin-top: 0.4rem;
    text-indent: 0.6rem;
  }
  .btnnn {
    /* width:2.4rem; */
	padding: 0 .2rem;
    height:0.76rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.38rem;
    font-size:0.3rem;
    font-weight:500;
    color:rgba(2,135,255,1);
    float: right;
    margin-bottom: 0.2rem;
  }
	.btnnn.sendactive{
		border: 1px solid #EDEDED;
		background: #EDEDED;
		color: #999999;
	}
  .btn111{
    width: 100%;
    height: 0.88rem;
    font-size: 0.3rem;
    border-radius:0.44rem;
    background:#EDEDED;
    color: #999999;
    margin-top: 0.8rem;
		border: 1px solid #EDEDED;
  }
	.butactive{
		background:rgba(2,135,255,1) !important;
		color: #fff !important;
		border: 1px solid ##0287FF;
	}
</style>
